.banner-view {
  background: rgba(0, 0, 0, 0.54);
  font-family: "Microsoft YaHei";
  @apply h-40px box-border rounded-20px font-normal text-24px text-hex-fff leading-40px px-16px absolute top-13px right-14px;
}
// 主内容
.main-container {
  margin-top: -27px;
  // @apply overflow-hidden;
  .first-child {
    border-radius: 32px 32px 0px 0px;
    @apply bg-hex-fff pt-32px pl-48px pr-45px relative box-border;
  }
}
.expand-wrap {
  // box-shadow: 0px -80px 150px #fff;
  position: absolute;
  z-index: 10;
  bottom: -40px;
  width: 100%;
  .expand-wrap-mask {
    width: 100%;
    height: 150px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
  }
}
.institution-tag {
  background: rgba(61, 138, 247, 0.1);
  @apply h-40px box-border leading-40px rounded-4px px-8px font-normal text-24px text-hex-3c88f7;
}
.location-item {
  border-bottom: 1px solid #eee;
  @apply pl-24px pr-28px py-24px flex flex-row items-center justify-between;
}
.comment-item {
  border-bottom: 1px solid #e4e4e4;
  @apply pb-40px;
  .rate-item-space {
    --space-item-horizontal-gap-small: 12px;
    --space-item-vertical-gap-small: 0;
    margin-top: 12px;
  }
  .comment-time {
    font-family: "Arial";
    @apply font-normal text-24px text-hex-b8b8bf;
  }
}
.contact-btn {
  width: 220px;
  height: 78px;
  border-radius: 39px;
  border: none;
  font-family: "Microsoft YaHei UI";
  &::after {
    border: none;
  }
  @apply box-border flex justify-center items-center font-normal text-30px text-hex-fff;
  &.consult {
    background: linear-gradient(180deg, #fba258 0%, #fb6f32 100%);
  }
  &.date {
    // margin-left: 64px;
    background: linear-gradient(180deg, #54b7f9 0%, #3c88f7 100%);
  }
}
.rate-wrap {
  width: fit-content;
  padding-bottom: 3px;
  @apply ml-auto;
  .rate {
    --rate-icon-empty-color: #e8e8ea;
    --rate-icon-full-color: #fe5900;
    --rate-icon-gutter: 4px;
    --rate-icon-size: 24px;
  }
}
.coment-rate {
  --rate-icon-empty-color: #e8e8ea;
  --rate-icon-full-color: #ffb70f;
  --rate-icon-gutter: 5px;
  --rate-icon-size: 27px;
}
.institution-item {
  border: none !important;
  padding-top: 0;
  padding-bottom: 0;
}
// 机构logo
.institution-logo {
  top: -48px;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.16));
  @apply w-140px h-140px box-border absolute left-47px rounded-1;
}
.map {
  width: 100%;
  height: 299px;
}
.course-btn {
  border: none;
  @apply w-full p-0  m-0 box-border;
  &::after {
    border: none;
  }
  &.mb {
    margin-bottom: 16px;
  }
}
.textContent {
  font-family: "Microsoft YaHei";
  @apply font-normal text-28px leading-48px text-hex-2c2c35 text-justify;
}

// -----------------------------------------------------
.wrap-layout {
  padding: 60px 30px;
}

.wrap-layout-subject {
  padding: 60px 30px 30px;
}

.wrap-layout-comment {
  padding: 60px 30px 0px;
}
.jumpNav-layout {
  background-color: #fff;
  padding: 60px 30px 0;
}

.detail-layout {
  padding: 36px 30px 0;
  background: url("https://static.91goodschool.com/UpFiles/public/yikao/image/Maskgroup.png")
    no-repeat #fff;
  background-size: 100% 70%;
}

.wrap {
  padding-bottom: 30px;
  border-bottom: 1px solid #eee;
}

.middlePart {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.left-rate {
  display: flex;
  align-items: center;
}
.descTag {
  display: flex;
  flex-direction: row;
  justify-content: start;
  font-size: 24px;
  .first-tag {
    box-sizing: border-box;
    padding: 4px 12px;
    margin-right: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    background-color: #f2f8ff;
    border-radius: 8px;
    border: 1px solid #1a8cff;
    color: #1a8cff;
  }
  .another-tags {
    box-sizing: border-box;
    padding: 4px 12px;
    margin-right: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    background-color: #f0f0f0;
    border-radius: 8px;
    color: #636363;
  }
}

// 学校地址 外阴影
.school-location {
  margin-bottom: 26px;
  border-radius: 28px;
  padding: 28px 30px 24px;
  box-shadow: 0 26px 22px 0 #f3f9ffff;
  background-color: #fff;
}

// 开设专业
.subject-scroll-wrap {
  // padding: 20px;
  @apply whitespace-nowrap;
  width: 100%;
  // height: 100%;
  height: 410px;
  // border: 1px solid transparent;
  .subject-items {
    text-align: center;
    margin: 15px;
    position: relative;
    width: 262px;
    height: 366px;
    display: inline-block;
    // background-color: aquamarine;
    border-radius: 12px;
    box-shadow: 0 14px 22px 0 #88aacc42;
    .subjectBottomMask {
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 0 0 12px 12px;
      background: linear-gradient(to bottom, transparent 0%, #2e2e2e10 17%, #050505ff 85%);
      color: #fff;
      font-size: 28px;
      font-weight: normal;
      @apply w-full h-80px absolute bottom-0 left-0;
    }
  }
}

// 评论
.commentScroll-wrap-container {
  width: 100%;
  height: 323px;
  overflow: hidden;
  .commentScroll-wrap {
    background: linear-gradient(180deg, #fcfcfeff 0%, #ffffffff 100%);
    padding-left: 30px;
    width: 100%;
    height: 100%;
    // height: 268px;
    // background-color: ;
    .comment-wrap {
      display: flex;
      width: 100%;
      height: 100%;
      .first-comment-item {
        box-sizing: border-box;
        padding: 30px 18px 42px 30px;
        margin: 0 15px 15px 0;
        flex: none;
        width: 470px;
        height: 268px;
        border-radius: 12px;
        background: linear-gradient(180deg, #d7f5ffff 0%, #c4e1ffff 100%);
        box-shadow: 0 14px 22px 0 #adcdeb40;
      }
      .second-comment-item {
        box-sizing: border-box;
        padding: 30px 18px 42px 30px;
        margin: 0 15px 15px 15px;
        flex: none;
        width: 470px;
        height: 268px;
        border-radius: 12px;
        background: linear-gradient(180deg, #e7fdf4ff 0%, #a5e1c9ff 100%);
        box-shadow: 0 14px 22px 0 #adcdeb40;
      }
      .third-comment-item {
        box-sizing: border-box;
        padding: 30px 18px 42px 30px;
        margin: 0 15px 15px 15px;
        flex: none;
        width: 470px;
        height: 268px;
        border-radius: 12px;
        background: linear-gradient(180deg, #ffebd3ff 0%, #fdd0a6ff 100%);
        box-shadow: 0 14px 22px 0 #adcdeb40;
      }
      .fourth-comment-item {
        box-sizing: border-box;
        padding: 30px 18px 42px 30px;
        margin: 0 15px 15px 15px;
        flex: none;
        width: 470px;
        height: 268px;
        border-radius: 12px;
        background: linear-gradient(180deg, #f2edffff 0%, #d0b9edff 100%);
        box-shadow: 0 14px 22px 0 #adcdeb40;
      }
    }
  }
}

// 在线答疑板块
.question-wrap {
  margin-bottom: 60px;
  position: relative;
  width: 100%;
  height: 314px;
  .question-small-wrap {
    padding: 40px 40px 46px 62px;
    box-sizing: border-box;
    width: 666px;
    height: 314px;
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 4px 0 32px 8px #8dc6ff26;
    z-index: 99;
    // 第一个问
    .askIcon-one {
      position: absolute;
      left: -26.5px;
      top: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 72px;
      height: 36px;
      border-radius: 20px 20px 0 20px;
      background: linear-gradient(270deg, #52a6faff 0%, #0178efff 100%);
    }
    // 第二个问
    .askIcon-two {
      position: absolute;
      left: -26.5px;
      top: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 72px;
      height: 36px;
      border-radius: 20px 20px 0 20px;
      background: linear-gradient(270deg, #52a6faff 0%, #0178efff 100%);
    }
    // 第三个问
    .askIcon-three {
      position: absolute;
      left: -26.5px;
      top: 164px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 72px;
      height: 36px;
      border-radius: 20px 20px 0 20px;
      background: linear-gradient(270deg, #52a6faff 0%, #0178efff 100%);
    }
    // 第四个问
    .askIcon-four {
      position: absolute;
      left: -26.5px;
      top: 232px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 72px;
      height: 36px;
      border-radius: 20px 20px 0 20px;
      background: linear-gradient(270deg, #52a6faff 0%, #0178efff 100%);
    }
    .customerServiceAvatar {
      position: absolute;
      right: 0;
      top: -127px;
    }
    // 去咨询
    .goConsult {
      position: absolute;
      right: 40px;
      bottom: 68px;
      text-align: center;
      line-height: 60px;
      width: 180px;
      height: 60px;
      background-color: #1a8cff;
      border-radius: 30px;
      color: #fff;
      font-size: 28px;
    }
  }
}

// 学校介绍板块
.school-intro-wrap {
  // padding-bottom: 60px;
}

// 学校简介
.pictureFormat-module {
  box-shadow: 0 26px 22px 0 #f3f9ffff;
  @apply w-full h-330px mb-20px;
}

// 图标优势项目
.icon-advanItem {
  background-color: #fff;
  margin-bottom: 28px;
  padding: 30px 34px;
  box-sizing: border-box;
  display: flex;
  border-radius: 12px;
  // flex-direction: row;
  // justify-content: start;
  box-shadow: 6px 10px 30px 6px #d6e6f742;
  .iconStyle {
    padding-top: 10px;
    flex: none;
    width: 96px !important;
    // height: 96px !important;
    margin-right: 17px;
    line-height: 1 !important;
  }
}

// 优势项目
.advantage-scroll-wrap {
  white-space: nowrap;
  @apply w-full h-525px;
  .advan-Item {
    display: inline-block;
    margin: 0 15px;
    width: 430px;
    height: 492px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 6px 10px 30px 6px #c8dbed4d;
    vertical-align: top;

    .advan-Item-text {
      margin: 14px 12px 0px;
      // width: 396px;
      height: 128px;
      text-align: left;
      -webkit-line-clamp: 4;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: break-spaces;
      color: #636363;
      font-weight: normal;
      line-height: 34px;
      font-size: 24px;
    }
  }
}

.album-scroll-wrap {
  @apply whitespace-nowrap h-full w-full;
  .album-items {
    margin: 15px;
    position: relative;
    width: 270px;
    height: 306px;
    display: inline-block;
    box-shadow: 0 14px 22px 0 #88aacc42;
    border-radius: 12px;
  }
}

// 名师团队滚动容器
.teach-scroll {
  @apply whitespace-nowrap h-520px;
  .teach-item {
    vertical-align: top;
    display: inline-block;
    margin: 15px;
    // x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色
    box-shadow: 0px 10px 30px 6px #d6e6f760;
    // box-shadow: 0 4px 24px rgba(255, 0, 0, 1);
    @apply h-476px w-356px rounded-12px bg-white mr-30px;
  }
  .teachIntro {
    margin: 16px 12px;
    text-align: center;
    -webkit-line-clamp: 4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: break-spaces;
    width: auto;
    height: 128px;
    color: #636363;
    @apply leading-4 text-24px;
  }
}

// 学员风采滚动容器
.student-scroll {
  @apply whitespace-nowrap h-340px w-full;
  .student-items {
    box-sizing: border-box;
    margin: 25px 15px 0px 15px;
    padding: 26px;
    display: inline-flex;
    border-radius: 12px;
    box-shadow: 8px 0 32px 8px #8dc6ff26;
    @apply bg-white w-600px h-292px mr-30px;
    .studentAvatar {
      flex: none;
    }
  }
  .student-intro {
    word-break: break-all;
    white-space: normal;
    align-items: center;
    width: 300px;
    height: 128px;
    @apply text-24px text-hex-636363;
  }
}

// 学校相册滚动容器
.album-scroll-wrap {
  @apply whitespace-nowrap h-full w-full;
  .album-items {
    margin: 15px;
    position: relative;
    width: 270px;
    height: 306px;
    display: inline-block;
    box-shadow: 0 14px 22px 0 #88aacc42;
    border-radius: 12px;
  }
  .studentBottomMask {
    box-sizing: border-box;
    padding: 28px 86px 20px 88px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to bottom, transparent 0%, #2e2e2e10 17%, #050505ff 85%);
    color: white;
    border-radius: 0 0 12px 12px;
    @apply text-24px w-full h-80px absolute bottom-0 left-0;
  }
}

// 学校资质滚动容器
.school-scroll-wrap {
  @apply whitespace-nowrap h-full w-full;
  .school-enviro-pic-items {
    width: 590px;
    height: 360px;
    border-radius: 12px;
    margin: 10px 15px 15px;
    display: inline-block;
    background: #d9d9d9ff;
    box-shadow: 0 14px 22px 0 #88aacc42;
  }
}

// 快捷导航
.jumpNav {
  box-sizing: border-box;
  @apply pt-50px pb-60px;
}

// 评论区弹层
.comment_Pannel {
  --popup-z-index: 999999;
  --popup-background-color: #fff;
}

// 评论区弹层的每一条评论
.comment-items {
  padding-bottom: 36px;
  margin-bottom: 34px;
  width: 100%;
  border-bottom: 1px solid #eeeeee;
}

// 视频播放按钮
.image_wrap {
  @apply w-full h-full
  position: relative;
  .playIcon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #00000080;
    overflow: hidden;
    border: none;
    &::before {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      width: 0;
      height: 0;
      border-top: 13px solid transparent;
      border-bottom: 13px solid transparent;
      border-left: 20px solid #fff;
    }
  }
}

// 多行显示省略号
.overMoreLineHidden {
  word-break: break-all;
  // white-space: wrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

// 超过一行显示省略号
.overLineHidden {
  word-break: break-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.locaItem {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #eeeeee;
  @apply w-full h-120px mb-34px;
}
